<template>
  <div class="bigdiv">
    <div class="lunbotu">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in tableData" :key="item.id">
          <div>
            <el-image
              :src="item.img"
              style="width: 700px; height: 300px"
            ></el-image>
            <h3>{{ item.title }}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="youce">
      <a :href="'../xiangqing2?title=' + item.title + '&img=' + item.img + '&name=' + item.name + '&text=' + item.text+ '&date=' + item.date" v-for="(item, index) in tableData" :key="index" class="image-container">
          <img :src="item.img" alt="图片" width="230px" height="120px" /><br>
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ item.title }}
      </a>
    </div>

    <div class="bottomDiv" >
        <div v-if="tableData.length > 0" class="bottomDiv2">
        <ul class="ultable" >
        <a :href="'../xiangqing2?title=' + item.title + '&img=' + item.img + '&name=' + item.name + '&text=' + item.text+ '&date=' + item.date" v-for="(item, index) in tableData" :key="index" class="imgg">
          <img :src="item.img" alt="图片" width="200px" height="200px" style="float: left;">
          <div class="wc">
            <h1>{{ item.title }}</h1>
            <p>{{ item.spann }}</p><br>
            {{ item.buMen }}&nbsp;&nbsp;&nbsp;&nbsp;
            {{ item.guanKan }}&nbsp;&nbsp;&nbsp;&nbsp;
            {{ item.date }}
          </div>
         </a>
        </ul>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2,6, 10, 15, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 条查以及分页的表单
      pageNum: 1,
      pageSize: 10,
      total: 0,
      searchData: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      total1: "",
      tableData: [],
    };
  },
  created() {
    this.seachTableData();
  },
  methods: {
    // 查询
    seachTableData() {
      this.searchData.currentPage = this.pageNum;
      this.searchData.pageSize = this.pageSize;
      axios.post("notice2/queryNotice2", this.searchData).then((res) => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        console.log(res);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.seachTableData();
    },
    handleCurrentChange(val) {
      console.log(val)
      this.pageNum = val;
      this.seachTableData();
    },
    // 时间按钮递增
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style>
.lunbotu {
  width: 700px;
  height: 300px;
  float: left;
}

.ultable {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
  }
  .imgg {
  width: calc(100% - 10px); /* 使用 calc 函数减去间距 */
  margin-bottom: 30px; /* 调整每个条目之间的间距 */
  padding: 10px;
  border: 1px solid #ccc; /* 添加边框样式 */
  box-sizing: border-box; /* 确保边框不会增加元素的宽度 */
  margin-left: 1px; /* 调整每个盒子之间的间距 */
  float: left;
}
.wc{
  float: left;
  width: 800px;
  height: 200px;
  /* background-color: #ccc; */
  margin-left: 15px
  
}
.bottomDiv {
  width: 100%;
  height: 100%; 
   margin: auto; 
  float: left;
  margin-top: 20px;
  padding-top: 20px;
  background-color: #fff;
  border-radius: 9px;
  margin-left: 2px;
}
.youce {
  width: 596px;
  height: 330px;
  /* background-color: rebeccapurple; */
  float: left;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.image-container {
  float: left;
  margin-left:25px ;
  margin-right: 5px; /* 可选的，用于在图片之间增加一些间距 */
  text-decoration: none;
  font-size: 20px;
  margin-bottom:10px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
  .headFromDiv {
    width: 90%;
    height: 80px;
    /* margin: auto; */
    background-color: #fff;
    border-radius: 9px;
  }
  /* 分页的盒子 */
.block {
  text-align: right;
  margin-top: 10px;
  margin-right: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.block {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
}
</style>